<template>
  <div>
    <en-table-layout
      :tableData="tableData"
      :loading="loading">
      <template slot="table-columns">
        <el-table-column label="页面ID" prop="page_id" min-width="100"></el-table-column>
        <el-table-column label="页面名称" prop="page_name" min-width="200"></el-table-column>
        <el-table-column prop="page_type_name" label="首页类型" min-width="200"></el-table-column>
        <el-table-column prop="owner_type" label="页面类型" min-width="200">
          <template slot-scope="scope">
            <span>{{s_leader_level[scope.row.owner_type]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="定制城市" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.province}}</span>
            <span v-if="scope.row.province&&scope.row.city">/{{scope.row.city}}</span>
            <span v-if="scope.row.county">/{{scope.row.county}}</span>
            <span v-if="scope.row.town">/{{scope.row.town}}</span>
            
          </template>
        </el-table-column>
        <el-table-column prop="state" label="页面状态" width="200">
          <template slot-scope="scope">
            <span :style="`color:${scope.row.state===2?'#30B08F':scope.row.state===3?'#ccc':'#606266'}`"
            >{{scope.row.state===1?'已保存':scope.row.state===2?'已上架':'已下架'}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="操作" width="430">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="setIndex(scope.row)">设为首页</el-button>
            <el-button
              v-if="scope.row.state === 1 || scope.row.state === 3 "
              size="mini"
              type="primary"
              @click="setUp(scope.row.page_id)">上架</el-button>
            <el-button
              v-if="scope.row.state === 2"
              size="mini"
              type="danger"
              @click="setDown(scope.row.page_id)">下架</el-button>
            <el-button
              size="mini"
              @click="editPage(scope.row.page_id)">编辑</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="copyPageConfirm(scope.row.page_id)">复制</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteItem(scope.row.page_id)">删除</el-button>
          </template>
        </el-table-column>
      </template>
      <div slot="toolbar" class="inner-toolbar">
        <el-form :model="inquireForm" ref="inquireRef" label-width="70px" class="demo-form-inline">
          <el-row :gutter="20">
          <el-col :span="4">
          <el-form-item label="页面名称" prop="page_name">
            <el-input v-model="inquireForm.page_name"  placeholder="页面名称" clearable></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="4">
          <el-form-item label="首页类型" prop="page_type">
             <el-select v-model="inquireForm.page_type" placeholder="首页类型" clearable>
               <el-option
                v-for="option in s_first_page_type"
                :label="option.name"
                :value="option.id"
                :key="option.id"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="页面类型" prop="page_type">
              <el-select v-model="inquireForm.owner_type" placeholder="页面类型" clearable>
                <el-option
                  v-for="option in s_page_type"
                  :label="option.name"
                  :value="option.id"
                  :key="option.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
          <el-form-item label="定制城市" prop="city">
            <el-input v-model="inquireForm.city" placeholder="定制城市" clearable></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="4">
          <el-form-item label="页面状态" prop="state">
            <el-select v-model="inquireForm.state" placeholder="页面状态" clearable>
               <el-option
                v-for="option in s_state"
                :label="option.name"
                :value="option.id"
                :key="option.id"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="3">
          <el-button type="primary" @click="searchEvent">查询</el-button>
          <el-button type="info" @click="resetInquire">重置</el-button>
          </el-col>
          </el-row>
        </el-form>
      </div>
      <el-pagination
        v-if="pageData"
        slot="pagination"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="pageData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.data_total">
      </el-pagination>
    </en-table-layout>

    <!--选择首页类型弹层-->
    <el-dialog
      title="选择首页类型"
      width="400px"
      class="dialog-index"
      :visible.sync="dialogIndex"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form
        :model="setIndexForm"
        :rules="setIndexRules"
        ref="setIndexForm"
        label-position="left"
        label-width="80px"
        size="small"
        class="set-index-form">
        <input type="hidden" v-model="setIndexForm.id" />
        <el-form-item label="首页类型" prop="home_page_type">
             <el-select v-model="setIndexForm.home_page_type" placeholder="请选择首页类型" clearable>
               <el-option
                v-for="option in s_first_page_type"
                :label="option.name"
                :value="option.id"
                :key="option.id"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label-width="0" prop="index_type">
          <el-radio-group v-model="setIndexForm.index_type">
            <el-radio :label="0">平台首页(默认)</el-radio>
            <el-radio :label="1">城市定制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="setIndexForm.index_type===1" label="选择城市" prop="index_region">
          <en-region-picker :api="MixinRegionApi" @changed="(object) => { this.setIndexForm.index_region = object.last_id }"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogIndex = false">取 消</el-button>
        <el-button type="primary" size="small" @click="submitSetIndex()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as API_Floor from '@/api/floor'
  import * as API_Page from '@/api/page'
  export default {
    name: "pageList",
    data() {
      return {
        // 列表loading状态
        loading: false,
        //查询表单
        inquireForm: {
          page_name: '',
          page_type: '',
          city: '',
          state: ''
        },
        s_first_page_type: [
          { id: '0', name: '无' },
          { id: '1', name: '商城首页' },
          { id: '2', name: '团购首页' },
          { id: '3', name: '附近首页' },
          { id: '4', name: '发现页' }
        ],
        s_state: [
          { id: '1', name: '已保存' },
          { id: '2', name: '已上架' },
          { id: '3', name: '已下架' }
        ],
        s_page_type: [
          { id: '0', name: '微页面' },
          { id: '1', name: '平台' },
          { id: '2', name: '城市' }
        ],
        s_leader_level: [ '微页面', '平台', '城市'],
        // 列表参数
        params: {
          page_no: 1,
          page_size: 10,
          store_id: 1,
          // page_type: 'INDEX',
          clientType: 'WAP'
        },
        // 列表数据
        tableData: [],

        /** 列表分页数据 */
        pageData: [],

        dialogIndex: false,
        setIndexForm: {
          id: null,
          index_type: 0,
          home_page_type: null,
          index_region: null
        },
        /** 选择首页类型 表单规则 */
        setIndexRules: {
          index_type: [
            { required: true, message: '请选择首页类型', trigger: 'change' }
          ],
          index_region: [
            { required: true, message: '请选择定制城市', trigger: 'change' }
          ]
        }
      }
    },
    mounted() {
      this.getList()
    },
    activated() {
      this.getList()
    },
    methods: {
      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size
        this.getList()
      },

      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page
        this.getList()
      },

      /** 获取页面数据 */
      getList() {
        this.loading = true;
        let _params = this.params;
        API_Floor.getPageList(_params).then(response => {
          this.loading = false
          this.tableData = response.data
          this.pageData = {
            page_no: response.page_no,
            page_size: response.page_size,
            data_total: response.data_total
          }
        }).catch(() => { this.loading = false })
      },
      /** 查询事件触发 */
      searchEvent() {
        this.params = {
          ...this.params,
          ...this.inquireForm
        };
        for (const _key in this.params) {
          if (this.params[_key] === '') { // 当条件值为''时去除条件
            delete this.params[_key];
          }
        }
        this.getList();
      },
      /** 重置表单数据 */
      resetInquire(){
        this.$refs.inquireRef.resetFields();
      },
      /*
        * @date 2020-02-10
        * @author wolfMan
        * @description {设置APP首页弹层}
      */
      setIndex(row) {
        console.log(row)
        let _id = row.page_id;
        if (this.$refs['setIndexForm'] !== undefined) {
          this.$refs['setIndexForm'].resetFields()
        }
        this.setIndexForm.home_page_type = row.page_type;
        if (row.city !== null) {
          this.setIndexForm.index_type = 1;
        } else {
          this.setIndexForm.index_type = 0;
        }
        this.dialogIndex = true;
        this.setIndexForm.id = _id;
      },
      /*
        * @date 2020-03-18
        * @author wolfMan
        * @description {设置APP首页提交}
      */
      submitSetIndex() {
        this.loading = true
        this.$refs['setIndexForm'].validate((valid, error) => {
          if (valid) {
            const _id = this.setIndexForm.id
            const params = {
              index_region: this.setIndexForm.index_region
            }
            let _type = this.setIndexForm.home_page_type
            API_Page.setAppIndex(_id, _type, params).then(response => {
              this.loading = false
              this.$message.success('APP首页设置成功')
              this.dialogIndex = false
              this.getList()
            }).catch(() => { this.loading = false })
          } else {
            this.$message.error('表单填写有误，请核对！')
            this.loading = false
          }
        })
      },
      /*
        * @date 2020-02-10
        * @author wolfMan
        * @description {编辑}
      */
      editPage(id) {
        this.$router.push({
          name: 'mobileFloorManage',
          params: {
            id: id
          }
        })
      },
      /*
        * @date 2020-11-10
        * @author luocheng
        * @description {复制页面}
      */
      copyPageConfirm(id) {
        this.loading = true;
        this.$confirm('是否确认复制该页面？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.copyPage(id)
        }).catch(() => {
          this.loading = false
          this.$message({
            type: 'info',
            message: '已取消复制'
          });          
        });
      },

      /**
        * @date 2020/10/29
        * @author kaiqiang
        * @description { 页面复制 }
      */
      copyPage(id) {
        let params = {
          'page_id': id
        }
        API_Page.copyPageIndex(params)
          .then(response => {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.getList();
          })
          .catch(error => {
            console.log(error)
          })
      },
      /*
        * @date 2020-11-10
        * @author luocheng
        * @description {复制页面}
      */
      deleteItem(_id) {
        this.loading = true;
        this.$confirm('此操作将永久删除该页面, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API_Page.deletePageIndex(_id).then(response => {
            this.loading = false;
            this.$message.success('删除成功!')
            this.getList();
          }).catch(() => {
            this.loading = false
          })
        }).catch(() => {
          this.loading = false
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      /*
        * @date 2020-02-10
        * @author wolfMan
        * @description {页面上架}
      */
      setUp(_id) {
        this.loading = true;
        API_Page.setPageUp(_id).then(response => {
          this.loading = false;
          this.$message.success('页面上架成功')
          this.getList();
        }).catch(() => { this.loading = false })
      },
      /*
        * @date 2020-02-10
        * @author wolfMan
        * @description {页面下架}
      */
      setDown(_id) {
        this.loading = true
        API_Page.setPageDown(_id).then(response => {
          this.loading = false
          this.$message.success('页面下架成功')
          this.getList()
        }).catch(() => { this.loading = false })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
.set-index-form {
  /deep/ .app-address {
    width: 220px!important;
    height: 32px;
    .app-address-title {
      padding: 0 20px 0 15px;
      height: 32px;
      line-height: 32px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
    }
  }
}
.el-upload {
  width: 100%;
}
.el-upload-dragger {
  width: 100%;
  min-height: 140px;
  height: 100%;
  padding: 20px 1em;
}
.el-progress{
  display: none;
}
.progress.el-progress{
  display: inline-block;
}

</style>
<style type="text/scss" lang="scss">
label{
  font-weight: 400;
}
</style>